<!--优质课信息管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right40">
        <div class="item-name">学期：</div>
        <el-select v-model="dataForm.term" placeholder="请选择" class="inputWidth" size="mini">
          <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">系：</div>
        <el-select v-model="dataForm.dept" placeholder="请选择" class="inputWidth" size="mini" >
          <el-option v-for="item in xi" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">教研室：</div>
        <el-select v-model="dataForm.teachClass" placeholder="请选择" class="inputWidth" size="mini">
          <el-option v-for="item in jys" :key="item.label" :label="item.deptName" :value="item.deptName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">教员姓名：</div>
        <el-input v-model="dataForm.teacherName" class="inputWidth" size="mini"></el-input>
      </div>
      <div class="search-button color-primary width70 right40" @click="initList">
        <img src="../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-warning width140" @click="importFile">
        <img src="../../assets/assessment/icon-import.png" alt="" />
        <span>导入候选对象</span>
      </div>
    </div>
    <div class="tabs">
        <div class="tabs-item">
            <div class="tabs-nav">
                <span class="is-active">候选对象数据</span>
                <span @click="changeTab">评选结果数据</span>
            </div>
            <div class="search-button delete-red width140" @click="delInfo">
                <img src="../../assets/assessment/icon-delete.png" alt="" />
                <span>全部删除</span>
            </div>
        </div>
        <div>
          <div class="table-container table-css">
              <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >
                  <el-table-column prop="hxOrder" label="序号" align="center" width="80"></el-table-column>
                  <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
                  <el-table-column prop="teachObject" label="授课对象" align="center"></el-table-column>
                  <el-table-column prop="planHours" label="计划学时" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.planHours}}</div>
                    </div>
                  </el-table-column>
                  <el-table-column prop="teachTask" label="主讲教员" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.teachTask}}</div>
                    </div>
                  </el-table-column>
                  <el-table-column prop="titleTech" label="职称" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.titleTech}}</div>
                    </div>
                  </el-table-column>
                  <el-table-column prop="xi" label="系" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.xi}}</div>
                    </div>
                  </el-table-column>
                  <el-table-column prop="teachClass" label="教研室" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.teachClass}}</div>
                    </div>
                  </el-table-column>
                  <el-table-column prop="remarks" label="备注" align="center">
                    <div slot-scope="scope"  v-if="scope.row.teachTaskInfos.length>0" class="row-line">
                       <div v-for="(i,k) in scope.row.teachTaskInfos" :key="k">{{i.remarks}}</div>
                    </div>
                  </el-table-column>
              </el-table>
          </div>
          <div class="export-button" @click="importExcel" style="width:150px">
              <img src="../../assets/assessment/icon-export.png" alt="" />
              <span>导出Excel</span>
          </div>
          <h1 class="total-notice">当前共找到{{total}}条记录，当前显示51-100条</h1>
          <div class="pagination-block">
              <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
              :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </div>
    </div>
    <!-- 提示 -->
    <el-dialog title="提  示" :visible.sync="showMessageDialog">
      <h1 class="notice">您确认要删除全部数据吗？</h1>
      <div slot="footer" class="footer-btn">
        <div class="btn1" @click="saveDele">确认</div>
        <div class="btn2" @click="showMessageDialog=false">取消</div>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog title="导入候选对象" :visible.sync="importDialog">
      <div class="chose">
        <span class="label-name">请选择数据文件 ：</span>
        <div class="importClass">
        <el-upload ref="upload"
                action="string"
                :show-file-list="false"
                :http-request="upLoadApi"
                accept=".xls,.xlsx"
                :on-change="fileInfo"
                :auto-upload="false" >
                <el-input :disabled="true" v-model="fileName" size="mini"></el-input>
            </el-upload>
        </div>
      </div>
      <div slot="footer" class="footer-btn">
        <div class="btn2 right120" @click="saveImport">导入</div>
        <div class="btn3" @click="importDialog=false">取消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {hxList,delHX,teacherList} from "@/api/teaching";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      activeName:'first',
      showMessageDialog:false,
      importDialog:false,
      xq:[],//学期
      xi:[],//系
      jys:[],//教研室
      fileName:'',
      total:1,
      dataForm:{
        pageNo:1,
        pageSize:50,
        dept:'',//系
        teachClass:'',//教研室
        term:'',//学学期
        teacherName:'',//教员姓名
      },
      tableData: [],
    };
  },
  mounted(){
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
    })
    this.teacherInfo()
    this.initList()
  },
  methods: {
    //当前页
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    //初始化列表
    async initList(){
      if(!this.dataForm.term){
        this.$message.error('请选择学期！')
        return
      }
      let res = await hxList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    delInfo(){
      if(!this.dataForm.term){
        this.$message.error('请选择学期！')
        return
      }
        this.showMessageDialog = true;
    },
    //删除
    async saveDele(){
      let res = await delHX({term:this.dataForm.term})
      if(res.code == 200){
          this.$message.success('删除成功！');
          this.initList()
      }
    },
    async teacherInfo(){
      let res = await teacherList();
      if(res.code == 200){
        this.dataForm.dept = res.data.isAdmin !=='1'? res.data.xi:'';
        this.dataForm.teachClass = res.data.isAdmin !=='1'? res.data.jys:'';
        //系列表
        this.commonApi.getXIOption().then(res=>{
          this.xi = res.data
        })
        //获取教研室
        this.commonApi.getJYSOption().then(res=>{
          this.jys = res.data
        })
      }
    },
    //导出
    importExcel(){
      if(!this.dataForm.term){
        this.$message.error('请选择学期！')
        return
      }
        Axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/hightQualityClass/exportHqcImportData',
            params:this.dataForm,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '候选对象数据.xlsx');
        });
    },
    importFile(){
      if(!this.dataForm.term){
        this.$message.error('请选择学期！')
        return
      }
      this.importDialog = true;
      this.fileName = '';
    },
    //导入
    upLoadApi(item){
        let formData = new FormData();
        formData.append('file', item.file,);
        formData.append('term', this.term,);
        let requestUrl = this.$store.state.studentUrl.baseUrl+'/hightQualityClass/importHQCExcel';
        Axios.post(requestUrl,formData).then(res => {
            if(res.data.success){
                this.$$message.success('导入成功!');
                this.importDialog = false;
                this.initList()
            }
        }).catch(error => {
            this.$message.error('上传失败');
        })
    },
    fileInfo(file){
        if(file.name.indexOf("xlsx") == -1 && file.name.indexOf("xls") == -1){
            this.$message.error('请上传excl文件');
        }else{
            this.fileName = file.name;
        }
    },
    saveImport(){
        this.$refs.upload.submit();
    },
    changeTab(){
        this.$router.push({
            path:'/qualityCourse/list2'
        })
    },
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
  margin-bottom: 77px;
  position: relative;
}
.table-css {
    margin-top: 7px!important;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table .cell{
    padding: 0!important
  }
  /deep/.el-table td{
    padding: 0
  }
}
</style>

<style lang="less" scoped>
@import "../../styles/commonCss.less";
.right40{margin-right: 30px;}
.width140{width: 140px;}
.right120{margin-right: 120px;}
.row-line{
  div{
    border-bottom: 1px solid #c7d7eb;
    height: 50px;
    line-height: 50px;
    &:nth-last-child(1){
      border-bottom: none;
    }
  }
}
.tabs-item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,76,167,0.39);
    .tabs-nav {
        >span{
        display: inline-block;
        font-weight: bold;
        width: 150px;
        text-align: center;
        line-height: 38px;
        color: #004CA7 ;
        height: 38px;
        background: rgba(77,129,192,0.1);
        border-radius: 6px 6px 0px 0px;
        cursor: pointer;
        &:nth-child(1){margin-right: 34px;}
    }
    .is-active{color: #fff;background: #4D81C0;}
    }

}
.width70{width: 70px;}
.inputWidth{ width: 110px;}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color:#F86900;}
    >img{width: 16px!important;height:16px!important;margin-right: 10px!important;}
}
.delete-red{
    >img{width: 16px!important;height:16px!important;margin-right: 10px!important;}
    width: 106px;
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.notice{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004CA7;
    text-align: center;
    margin: 60px 0 58px;
}
.footer-btn{
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    div{
        width: 87px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
        cursor: pointer;
    }
    .btn1{
        border: 1px solid #F3B815;
        color:#F3B815 ;
        background: #FFF6EF;
        margin-right: 120px;
    }
    .btn2{
        background: #F1FFF8;
        border: 1px solid #02C86C;
        color:#02C86C ;
    }
    .btn3{
        background: #FFEFEF;
        border: 1px solid #FF3819;
        color:#FF3819;
    }
}
.chose{
    margin: 25px auto 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    .flex{
        display: flex;
        align-items: center;
    }
    .label-name{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #004CA7;
    }
}
</style>
